/* pages/device/info/channal/index.wxss */
.channalPage {
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.channalList {
    flex: 1;
    height: 0;

    .list {
        padding: 24rpx;
        display: flex;
        flex-direction: column;
        gap: 24rpx;

        .item {
            background: #fff;
            padding: 24rpx;
            padding-bottom: 0;
            font-size: 24rpx;
        }
    }
}

.itemTop {
    display: flex;
    gap: 24rpx;
    padding-bottom: 24rpx;

    .imgBox {
        width: 252rpx;
        height: 148rpx;
        background: #e7e7e7;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        color: #cdcdcd;

        .iconfont {
            font-size: 48rpx;
        }
    }

    .info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .name {
            display: flex;
            justify-content: space-between;
            font-size: 26rpx;
            font-weight: 600;
        }
    }

    .onlineStatus {
        padding-left: 20rpx;

        .status {
            position: relative;
            color: #4aa5ff;

            &::before {
                width: 12rpx;
                height: 12rpx;
                border-radius: 6rpx;
                background: #4aa5ff;
                content: '';
                display: block;
                top: 50%;
                position: absolute;
                transform: translateX(-20rpx) translateY(-50%);
            }

            &.offline {
                color: #dc3210;

                &::before {
                    background: #dc3210;
                }
            }
        }
    }

    .statusBar {
        .base {
            height: 6rpx;
            background: #dee8fa;
            border-radius: 6rpx;
            display: flex;
            overflow: hidden;
            position: relative;

            .bar {
                flex-grow: 0;
                flex-shrink: 0;
                width: 80%;
                background: #4aa5ff;
                border-radius: 6rpx;

                &.offline::before {
                    content: '';
                    display: block;
                    width: 30%;
                    height: 6rpx;
                    background: #dc3210;
                    left: 0;
                    top: 0;
                }
            }
        }
    }
}

.itemBottom {
    border-top: #DEDFE0 2rpx solid;
    padding: 24rpx 0;

    .subList {
        display: flex;
        flex-direction: column;
        gap: 18rpx;
    }

    .subItem {
        display: flex;
        justify-content: space-between;

        .value {
            color: #4aa5ff;

            &.offline {
                color: #dc3210;
            }
        }
    }
}